<template>
<div>
<!--  执业人员财务统计  -->

  <el-form :inline="true" :model="MyCwStatisticsForm" class="demo-form-inline">

    <el-form-item>
      <el-autocomplete
          class="inline-input"
          v-model="MyCwStatisticsForm.empName"
          :fetch-suggestions="querySearch"
          placeholder="请输入内容"
          @select="handleSelect"
      ></el-autocomplete>
    </el-form-item>

    <el-form-item label="日期:">
      <el-date-picker
          v-model="dateData"
          type="daterange"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
      </el-date-picker>
    </el-form-item>

    <el-form-item >
      <el-button @click="queryMyToneji" type="primary" >检索</el-button>
    </el-form-item>

    <el-form-item>
      <el-button @click="shijianqujian(1)" type="primary" plain>最近一个月</el-button>
    </el-form-item>

    <el-form-item>
      <el-button @click="shijianqujian(3)" type="primary" plain>最近三个月</el-button>
    </el-form-item>

    <el-form-item >
      <el-button @click="shijianqujian(6)" type="primary" plain>最近半年</el-button>
    </el-form-item>

    <el-form-item >
      <el-button @click="shijianqujian(12)" type="primary" plain>最近一年</el-button>
    </el-form-item>


</el-form>


</div>
</template>

<script>
export default {
  name: "PractitionersCwStatistics",
  data(){
    return{
      HrEmpData:[{value:''}], // 执业人员数据
      MyCwStatisticsForm:{ // 执业 人员 统计 表单
        empName:""
      },
      dateData:[], // 区域日期
    }
  },
  created() {
this.queryHrEmp()
  },
  methods:{
    queryHrEmp() { // 查询执业人员
      const loading = this.$loading({
        lock: true,
        text: '正在载入...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });

      this.$http.get('PractitionersCwStatistics/hremps')
      .then( res => {
        setTimeout(() => {
          loading.close();
        });
        for(var i=0;i<res.data.data.length;i++) { // 遍历数据 只要name

          res.data.data[i].value = res.data.data[i].empName
        }
        this.HrEmpData = res.data.data
      })
      .catch()
    },
    querySearch(queryString, cb) {
      var HrEmpData = this.HrEmpData;

      var results = queryString ? HrEmpData.filter(this.createFilter(queryString)) : HrEmpData;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (restaurant) => {
        return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    queryMyToneji(){ // 执业人员统计
      if (this.MyCwStatisticsForm.empName == null || this.MyCwStatisticsForm.empName == '' ){
        this.$message.error('请将填写执业人员!');
        return
      }
      if(this.dateData.length < 1){
        this.$message.error('请将填写正确的时间范围!');
        return
      }
      // 获取时间区间
      this.MyCwStatisticsForm.dateStart = this.dateData[0]
      this.MyCwStatisticsForm.dateEnd = this.dateData[1]

this.$router.push({name:'querypractitionerscwstatistics',params:this.MyCwStatisticsForm})
.then(() => {

})
    },
    handleSelect(){},
    shijianqujian(val){ //查询方法

      if (this.MyCwStatisticsForm.empName == null || this.MyCwStatisticsForm.empName == '' ){
        this.$message.error('请将填写执业人员!');
        return
      }
      // if(this.dateData.length < 1){
      //   this.$message.error('请将填写正确的时间范围!');
      //   return
      // }

      const start = new Date(); // 定义开始时间
      const end = new Date();   // 定义结束时间
      start.setMonth(start.getMonth()-val)

      this.dateData=[this.$date.formatDate(start,'yyyy-MM-DD'),this.$date.formatDate(end,'yyyy-MM-DD')]

      // 获取时间区间
      this.MyCwStatisticsForm.dateStart = this.$date.formatDate(start,'yyyy-MM-DD')
      this.MyCwStatisticsForm.dateEnd = this.$date.formatDate(end,'yyyy-MM-DD')



      this.$router.push({name:'querypractitionerscwstatistics',params:this.MyCwStatisticsForm})

    },
    latelyMonth(){ // 一个月


    },
    latelySanMonth(){// 三个月





    },
    latelyYear() {// 半年

    },
    latelyHalfYear() {// 一年

    }
  }
}
</script>

<style scoped>

</style>